import { Component } from 'react';
import styles from './index.less';
import { connect } from 'dva';
import router from 'umi/router';
import { Progress, Toast, Modal } from 'antd-mobile';
import { mobileShopUrl } from 'config';
const alert = Modal.alert;
@connect(({ zhongcai }) => zhongcai)
class Zhongcai extends Component {
  componentDidMount() {
    this.props.dispatch({
      type: 'zhongcai/getCaiyuanInfoEff'
    });
  }
  state = {
    showMyPoints: false,
    showRule: false,
    showModal: false,
    showSignInSuccess: false,
    isNight: false,
    // showJiaoshui: false
    // age: 'Seedling'
  };
  onShowPoints = () => {
    this.setState({
      showMyPoints: true
    });
  };
  onShowRule = () => {
    this.setState({
      showRule: true
    });
  };
  onShowModal = () => {
    this.setState({
      showModal: true
    });
  };
  onShowJiaoShui = () => {

    this.props.dispatch({
      type: 'zhongcai/waterVagetableEff',
    });
  };
  onShowSignInSuccess = () => {
    this.props.dispatch({
      type: 'zhongcai/waterSignEff',
      callback: () => {
        this.setState({
          showSignInSuccess: true
        });
        setTimeout(() => {
          this.setState({ showSignInSuccess: false });
        }, 2000);
      }
    });
  };
  onChangePointsToWater = pointsToChange => {
    this.props.dispatch({
      type: 'zhongcai/changePointsToWaterEff',
      pointsToChange
    });
  };
  onToSendVegetable = count => {
    count = parseInt(count / 500)
		console.log("​Zhongcai -> count", count)
    if (count > 0) {
      const alertInstance = alert('确认要将所有蔬菜邮寄？', '', [
        {
          text: '确认',
          onPress: () => {
            console.log(this.props)
            this.props.dispatch({
              type: 'main/goToMobileShopWithToken',
              host: mobileShopUrl,
              hash: '#/pages/myCart/index',
              query: `?goodType=vegetable&count=${count}&`
            });
          },
          style: 'default'
        },
        { text: '再想想', onPress: () => alertInstance.close() }
      ]);
    } else {
      Toast.info('未收获任何蔬菜，不能邮寄哦');
    }
  };
  render() {
    let {
      showMyPoints,
      showRule,
      showModal,
      showSignInSuccess,
    } = this.state;
    let { water, water_has_eat, vagetable, points, headimgurl,showJiaoshui } = this.props;
    let changeData = [1, 5, 10, 20, 30, 40, 50];
    let percent = parseFloat((water_has_eat / 6).toFixed(1));
    return (
      <div className={styles.vegetables}>
        {/* <div style="display:none}> */}
        <div className={styles.background} />
        <h3 className={styles.Three}>精天菜园</h3>
        <div className={styles.portrait}>
          <img src={headimgurl} alt="" className={styles.Head} />
        </div>
        <div className={styles.integral} onClick={this.onShowPoints}>
          <img src={require('src/assets/jifen.png')} alt="" className={styles.img_integral} />
          <span className={styles.span_integral}>我的积分</span>
        </div>
        <div className={styles.Notice} onClick={this.onShowRule}>
          <img src={require('src/assets/gogao.png')} alt="" className={styles.img_Notice} />
          <span className={styles.span_Notice}>公告</span>
        </div>
        <div className={styles.food}>
          {/* 幼苗 */}
          {water_has_eat < 200 && (
            <div className={styles.Seedling}>
              <img src={require('src/assets/caimiao_C.png')} alt="" className={styles.cabbage} />
            </div>
          )}

          {/* 成长期 */}
          {water_has_eat < 400 &&
            water_has_eat >= 200 && (
              <div className={styles.Young}>
                <img src={require('src/assets/Young_B.png')} alt="" className={styles.cabbage} />
              </div>
            )}

          {/* 成熟期 */}
          {water_has_eat >= 400 && (
            <div className={styles.mature}>
              <img src={require('src/assets/mature_A.png')} alt="" className={styles.cabbage} />
            </div>
          )}

          <div className={styles.showInfo}>
            <div className={styles.progress}>
              <Progress percent={percent} position="normal" />
            </div>
            <div aria-hidden="true">{percent}%</div>
          </div>
        </div>
        <div className={styles.column}>
          {/* 积分兑换 */}
          <div className={styles.Noodles} onClick={this.onShowModal}>
            <img src={require('src/assets/water.png')} alt="" className={styles.img_Noodles} />
            <span className={styles.span_Noodles}>积分兑换</span>
          </div>

          {/* 签到 */}
          <div className={styles.Signin} onClick={this.onShowSignInSuccess}>
            <img src={require('src/assets/qindao.png')} alt="" className={styles.qian} />
            <span className={styles.span_Signin}>签到</span>
          </div>

          {/* 收获 */}
          <div className={styles.Number} onClick={this.onToSendVegetable.bind(this, vagetable)}>
            <img src={require('src/assets/baicai.png')} alt="" className={styles.imgs_Number} />
            <span className={styles.span_Number}>
              已收获： <a className={styles.a_Number}>{vagetable}g</a>{' '}
            </span>
          </div>

          {/* 水量 */}
          <div className={styles.Bailwater} onClick={this.onShowJiaoShui} >
            <img src={require('src/assets/shuilian_A.png')} alt="" className={styles.img_water} />
            <span className={styles.span_Bail}>{water}g</span>
          </div>
          {/* </div> */}
        </div>

        {/* 我的积分页面 */}
        {showMyPoints && (
          <div className={styles.My_Noodles}>
            <div className={styles.black_Noodles}>
              <div className={styles.Close} onClick={() => this.setState({ showMyPoints: false })}>
                <img src={require('src/assets/close.png')} alt="" className={styles.imgs_close} />
              </div>
              <img src={require('src/assets/jifen.png')} alt="" className={styles.imgs_back} />
              <p className={styles.pw_text}>
                {' '}
                我的积分：
                <span className={styles.span_text}>{points}</span>
              </p>
            </div>
          </div>
        )}

        {/* 公告点击 */}
        {showRule && (
          <div className={styles.attack}>
            <div className={styles.bigbox_attack}>
              <div className={styles.Close} onClick={() => this.setState({ showRule: false })}>
                <img src={require('src/assets/close.png')} alt="" className={styles.imgs_close} />
              </div>
              <h3 className={styles.one_attack}>规则公告</h3>
              <div className={styles.backg_attack}>
                <img
                  src={require('src/assets/caibeijin.jpg')}
                  alt=""
                  className={styles.imgs_attack}
                />
              </div>
              <p className={styles.pw_attack}>规则说明:</p>
              <p className={styles.pw_attack}>
                蔬菜成长分为：菜苗期、成长期、成熟期、收割期，每一期需要200g水，浇水成长进度达到100%，即可进入下一个生命周期，到达收割期将自动收割为500g蔬菜。
              </p>
              {/* <button className={styles.butt_attack}>去养鸡</button> */}
            </div>
          </div>
        )}

        {/* 积分兑换 */}
        {showModal && (
          <div className={styles.My_Exchange}>
            <label className={styles.label_exchange}>
              <div className={styles.feed_exchange}>
                <img src={require('src/assets/water_A.png')} alt="" className={styles.imge_feed} />
              </div>
              <div
                className={styles.close_exchange}
                onClick={() => this.setState({ showModal: false })}
              >
                <img src={require('src/assets/close_2.png')} alt="" className={styles.imge_close} />
              </div>
              <p className={styles.pw_exchange}>兑换露水</p>
              <div className={styles.shuibox}>
                {changeData.map((data, index) => (
                  <div className={styles.shuibox_div} key={index}>
                    <span className={styles.span_dui}>
                      消耗
                      {data}
                      积分兑换
                      {data * 5}
                      克水
                    </span>
                    <button
                      className={styles.butt_dui}
                      onClick={this.onChangePointsToWater.bind(this, data)}
                    >
                      兑换
                    </button>
                  </div>
                ))}
              </div>
            </label>
          </div>
        )}

        {/* 签到页面 */}
        {showSignInSuccess && (
          <div className={styles.My_Signin}>
            <div className={styles.Signin_back}>
              <img src={require('src/assets/qindao.png')} alt="" className={styles.imgs_back} />
              <p className={styles.pw_Signin}> 签到成功,水+5g </p>
            </div>
          </div>
        )}

        {/* 水量点击 */}
        {showJiaoshui && (
          <div className={styles.My_long}>
            <div className={styles.long_voe}>
              <img src={require('src/assets/jiaoshui.png')} alt="" className={styles.imgs_long} />
            </div>
          </div>
        )}
      </div>
    );
  }
}
export default Zhongcai;
